import { defineComponent } from 'vue-demi'
import { VALUE_NAME } from './utils/constant'
import { h } from './utils/domutil'
import YcScreenLine from './components/yc-screen-line'
import YcScreenCircle from './components/yc-screen-circle'

const componentMap = {
  line: YcScreenLine,
  circles: YcScreenCircle
}

export default defineComponent({
  props: {
    [VALUE_NAME]: {
      type: Array,
      default: () => []
    },
    width: {
      type: Number,
      default: undefined
    },
    height: {
      type: Number,
      default: undefined
    },
    componentMap: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {}
  },
  computed: {
    compMap() {
      return {
        ...componentMap,
        ...this.componentMap
      }
    },
    lines() {
      return this[VALUE_NAME].filter((item) => item.type === 'line')
    },
    circles() {
      return this[VALUE_NAME].filter((item) => item.type === 'circle')
    }
  },
  methods: {
    getLines(level = 'bottom') {
      return this.lines.map((item) => {
        return h(this.compMap.line, {
          props: { active: item.active, [VALUE_NAME]: item.path, level }
        })
      })
    },
    getCircles(level = 'bottom') {
      return this.circles.map((item) => {
        return h(this.compMap.circles, {
          props: { active: item.active, [VALUE_NAME]: item.point, level }
        })
      })
    }
  },
  render() {
    return h(
      'svg',
      {
        class: 'yc-screen-svg',
        attrs: {
          viewBox: `0 0 ${this.width} ${this.height}`
        }
      },
      [
        // 底层线条
        ...this.getLines(),
        // 中层线条
        ...this.getLines('middle'),
        // 上层线条
        ...this.getLines('top'),
        // 底层圆
        ...this.getCircles(),
        // 上层圆
        ...this.getCircles('top')
      ]
    )
  }
})
